<template>
    <div class="main_box" style="padding:10px">
        <div class="add_wrap">
            <el-row>
                <div class="tit">
                    <h2>{{ dataForm.modelId ? '编辑配送费模板' : '编辑配送费模板' }}</h2>
                    <el-button type="success" plain size="small" icon="fa fa-mail-forward"
                        @click="returnList">返回</el-button>
                </div>
                <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="rules">
                    <el-row>
                        <el-form-item prop="modelName" label="模板名称">
                            <el-input v-model="dataForm.modelName"></el-input>
                        </el-form-item>
                        <el-form-item prop="businessId" label="商户">
                            <el-select v-model="dataForm.businessId">
                                <el-option v-for="item in businessList" :value="item.id" :label="item.name" :key="item.id">

                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <div class="tit">
                            <h2>配送费表</h2>
                            <el-button type="success" circle icon="el-icon-plus" @click="add">

                            </el-button>
                        </div>
                        <el-table ref="tableList" :data="dataForm.list" style="width:calc(100vw - 270px);max-width:fit-content;margin-top: 10px;">
                            <el-table-column align="center" width="60">
                                <template slot-scope="scope">
                                    <el-button circle type="danger" plain icon="el-icon-minus" @click="sub(scope.$index)">

                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="价格区间(元)" align="center" width="260">
                                <template slot-scope="scope">
                                    <div class="price-decimal">
                                        <el-input :readOnly="userRole!=1?true:false" v-model.trim="scope.row.priceMin" @input="handlePriceInput(scope.row,'priceMin')" @blur="handlePriceBlur(scope.row,1)">

                                        </el-input>
                                        <div class="sperate"></div>
                                        <el-input :readOnly="userRole!=1?true:false" v-model.trim="scope.row.priceMax" @input="handlePriceInput(scope.row,'priceMax')" @blur="handlePriceBlur(scope.row,2)">

                                        </el-input>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="服务员实际所得-公共(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    <el-input :readOnly="userRole!=1?true:false" v-model.trim="scope.row.pubWaiterRealDeliveryFee" @input="handlePriceInput(scope.row,'pubWaiterRealDeliveryFee')" @blur="handlePriceBlur(scope.row,3)">

                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="平台实际补贴-公共(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    <el-input :readOnly="userRole!=1?true:false" v-model.trim="scope.row.pubPlatformRealDeliveryFee" @input="handlePriceInput(scope.row,'pubPlatformRealDeliveryFee')" @blur="handlePriceBlur(scope.row,4)">

                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="用户应出(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    <el-input v-model.trim="scope.row.customerDeliveryFee" @input="handlePriceInput(scope.row,'customerDeliveryFee')" @blur="handlePriceBlur(scope.row,5)">

                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="平台补贴-公共(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    <el-input :readOnly="userRole!=1?true:false" v-model="scope.row.pubPlatformDeliveryFee" @input="handlePriceInput(scope.row,'pubPlatformDeliveryFee')">

                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="商户补贴-公共(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    {{ scope.row.pubBusinessDeliveryFee }}
                                </template>
                            </el-table-column>
                            <el-table-column label="服务员所得-公共(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    {{ scope.row.pubWaiterDeliveryFee }}
                                </template>
                            </el-table-column>
                            <el-table-column label="用户应出最大值(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    {{ scope.row.maxCustomerDeliveryFee }}
                                </template>
                            </el-table-column>

                            <el-table-column label="服务员实际所得-专属(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    <el-input :readOnly="userRole!=1?true:false" v-model.trim="scope.row.priWaiterRealDeliveryFee" @input="handlePriceInput(scope.row,'priWaiterRealDeliveryFee')" @blur="handlePriceBlur(scope.row,6)">

                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="平台实际补贴-专属(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    0
                                </template>
                            </el-table-column>
                            <el-table-column label="平台补贴-专属(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    0
                                </template>
                            </el-table-column>
                            <el-table-column label="商户补贴-专属(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    {{ scope.row.priBusinessDeliveryFee }}
                                </template>
                            </el-table-column>

                            <el-table-column label="服务员所得-专属(元)" align="center" width="110">
                                <template slot-scope="scope">
                                    {{ scope.row.priWaiterDeliveryFee }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row>
                        <el-form-item>
                            <el-button plain type="primary" @click="sureClick">保 存</el-button>
                            <el-button plain @click="returnList">取 消</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-row>

        </div>
    </div>
</template>

<script>
import * as message from "@/constants/message";
import DeliveryModelApi from '@/api/business/deliveryModel';
import BusinessApi from "@/api/business/business";
import { upperFirst } from "lodash-es";
export default {
    data() {
        return {
            userRole:"",
            dataForm: {
                modelId: "",
                modelName: "",
                businessId:"",
                list: [
                    {
                        priceMin: "",
                        priceMax: "",

                        pubWaiterRealDeliveryFee:"",
                        pubPlatformRealDeliveryFee:"",
                        customerDeliveryFee:"",
                        pubPlatformDeliveryFee: "",
                        pubBusinessDeliveryFee: "",
                        pubWaiterDeliveryFee: "",
                        maxCustomerDeliveryFee:"",

                        priWaiterRealDeliveryFee:"",
                        priPlatformRealDeliveryFee:0,
                        priPlatformDeliveryFee:0,
                        priBusinessDeliveryFee:"",
                        priWaiterDeliveryFee:"",

                    }
                ],
            },
            businessList:[],
            rules: {
                modelName: [
                    { required: true, message: "请输入模板名称", trigger: "change" }
                ],
                businessId: [
                    { required: true, message: "请选择商户", trigger: "change" }
                ],
            }
        }
    },
    components: {
    },
    watch:{
        "dataForm.list":{
            handler(val){
                this.useProxy(val)
            },
            immediate:true
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            this.userRole = this.$store.getters.userRole
            if (this.$route.query.id) {
                this.dataForm.modelId = this.$route.query.id
                this.getData()
            }
            this.getBusinessList()
        },
        keydown(e) {
            if (e.keyCode == 32) {
                e.returnValue = false;
            }
        },
        getData() {
            DeliveryModelApi.getDeliveryModelInfo({
                id: this.dataForm.modelId
            }).then(res => {
                this.$Utils.bindingBean(this.dataForm, res.data)
            })
        },
        // 获取商户列表
        getBusinessList() {
            BusinessApi.listIdNameVo().then(res => {
                this.businessList = res.data
            })
        },
        handlePriceInput(row,prop){
            const {pubPlatformRealDeliveryFee,pubWaiterRealDeliveryFee,priPlatformRealDeliveryFee} = row
            if(prop=="customerDeliveryFee"&&(!this.$Utils.existStr(pubPlatformRealDeliveryFee)||!this.$Utils.existStr(pubWaiterRealDeliveryFee))){
                this.$message.error("请先填写服务员实际所得-公共和平台实际补贴-公共")
                row[prop] = ""
                return
            }
            let reg = /[^0-9\.]|^\./g
            if(prop=='pubPlatformRealDeliveryFee'||prop=='priPlatformRealDeliveryFee'){
                reg = /[^0-9\.\-]|^\.|.\-/g
            }
            row[prop] = row[prop].replace(reg,"")
            const str = row[prop].split(".")[1]
            if(str&&str.length>=3){
                row[prop] = parseFloat(parseFloat(row[prop]).toFixed(2))
            }
        },
        handlePriceBlur(row,type){
            const {
                priceMin,
                priceMax,
                pubWaiterRealDeliveryFee,
                pubPlatformRealDeliveryFee,
                customerDeliveryFee,
                priWaiterRealDeliveryFee
               } = row
            const flag1 =  (priceMin||priceMin===0)&&(priceMax||priceMax===0)
            const existStrFn = this.$Utils.existStr
            const existStr1 = existStrFn(pubWaiterRealDeliveryFee)
            const existStr2 = existStrFn(pubPlatformRealDeliveryFee)
            const existStr3 = existStrFn(customerDeliveryFee)
            const existStr4 = existStrFn(priWaiterRealDeliveryFee)
            const misPrice = Number(pubWaiterRealDeliveryFee)<Number(customerDeliveryFee)+Number(pubPlatformRealDeliveryFee)
            if(type==1&&flag1&&Number(priceMax)<priceMin){
                this.$message.error("最小价格不能大于最大价格")
                row.priceMin = ""
            }else if(type==2&&flag1&&Number(priceMax)<priceMin){
                this.$message.error("最大价格不能小于最小价格")
                row.priceMax = ""
            }else if(type==3){
                if(existStr1&&existStr2&&Number(pubWaiterRealDeliveryFee)<pubPlatformRealDeliveryFee){
                    row.pubWaiterRealDeliveryFee = ""
                    row.customerDeliveryFee = ""
                    this.$message.error("服务员实际所得-公共不能小于平台实际补贴-公共")
                    return
                }
                if(existStr1&&existStr2&&existStr3&&misPrice){
                    row.pubWaiterRealDeliveryFee = ""
                    row.customerDeliveryFee = ""
                    this.$message.error("平台实际补贴-公共与用户应有的和应该小于服务员实际所得-公共")
                    return
                }



                if(!existStr2) row.customerDeliveryFee = ""
            }else if(type==4){
                if(existStr1&&existStr2&&Number(pubWaiterRealDeliveryFee)<pubPlatformRealDeliveryFee){
                    row.pubPlatformRealDeliveryFee = ""
                    row.customerDeliveryFee = ""
                    this.$message.error("平台实际补贴-公共不能大于服务员实际所得-公共")
                    return
                }
                if(pubPlatformRealDeliveryFee=='-'){
                    row.pubPlatformRealDeliveryFee = ""
                    row.customerDeliveryFee = ""
                }
                if(existStr1&&existStr2&&existStr3&&misPrice){
                    row.pubWaiterRealDeliveryFee = ""
                    row.customerDeliveryFee = ""
                    this.$message.error("平台实际补贴-公共与用户应有的和应该小于服务员实际所得-公共")
                    return
                }
                if(!existStr2) row.customerDeliveryFee = ""
            }else if(type==5){
                if(existStr1&&existStr2&&existStr3&&misPrice){
                    row.customerDeliveryFee = ""
                    this.$message.error("平台实际补贴-公共与用户应有的和应该小于服务员实际所得-公共")
                    return
                }
                if(existStr3&&existStr4&&Number(priWaiterRealDeliveryFee)<customerDeliveryFee){
                    row.customerDeliveryFee = ""
                    this.$message.error("用户应有不能大于服务员实际所得-专属")
                    return
                }

            }else if(type==6){
                if(existStr3&&existStr4&&Number(priWaiterRealDeliveryFee)<customerDeliveryFee){
                    row.priWaiterRealDeliveryFee = ""
                    this.$message.error("服务员实际所得-专属不能小于用户应有")
                    return
                }
            }
        },
        add(){
            const obj = this.$options.data().dataForm.list[0]
            this.dataForm.list.push(obj)
        },
        useProxy(obj){
            if(Array.isArray(obj)){
                obj.forEach(item=>this.useDefineProperty(item))
            }else{
                this.useDefineProperty(obj)
            }
        },
        useDefineProperty(obj){
            const existStrFn = this.$Utils.existStr
            Object.defineProperties(obj,{
                pubBusinessDeliveryFee:{
                    get(){
                        const existStr1 = existStrFn(obj.pubWaiterRealDeliveryFee)
                        const existStr2 = existStrFn(obj.pubPlatformRealDeliveryFee)
                        const existStr3 = existStrFn(obj.customerDeliveryFee)
                        if(existStr1&&existStr2&&existStr3){
                            const res = parseFloat((obj.pubWaiterRealDeliveryFee-obj.pubPlatformRealDeliveryFee-obj.customerDeliveryFee).toFixed(2))
                            return (res===0||res)?res:""
                        } else{
                            return ""
                        }
                    }
                },
                pubWaiterDeliveryFee:{
                    get(){
                        const existStr1 = existStrFn(obj.pubWaiterRealDeliveryFee)
                        const existStr2 = existStrFn(obj.pubPlatformRealDeliveryFee)
                        const existStr3 = existStrFn(obj.pubPlatformDeliveryFee)
                        if(existStr1&&existStr2&&existStr3){
                            const res = parseFloat((obj.pubWaiterRealDeliveryFee-obj.pubPlatformRealDeliveryFee+Number(obj.pubPlatformDeliveryFee)).toFixed(2))
                            return (res===0||res)?res:""
                        } else{
                            return ""
                        }
                    }
                },
                maxCustomerDeliveryFee:{
                    get(){
                        const existStr1 = existStrFn(obj.pubWaiterRealDeliveryFee)
                        const existStr2 = existStrFn(obj.pubPlatformRealDeliveryFee)
                        if(existStr1&&existStr2){
                            const res = parseFloat((obj.pubWaiterRealDeliveryFee-obj.pubPlatformRealDeliveryFee).toFixed(2))
                            return (res===0||res)?res:""
                        } else{
                            return ""
                        }
                    }
                },
                priBusinessDeliveryFee:{
                    get(){
                        const existStr1 = existStrFn(obj.priWaiterRealDeliveryFee)
                        const existStr2 = existStrFn(obj.customerDeliveryFee)
                        if(existStr1&&existStr2){
                            const res = parseFloat((obj.priWaiterRealDeliveryFee-obj.customerDeliveryFee).toFixed(2))
                            return (res===0||res)?res:""
                        } else{
                            return ""
                        }
                    }
                },
                priWaiterDeliveryFee:{
                    get(){
                        if(existStrFn(obj.priWaiterRealDeliveryFee)){
                            const res = parseFloat(parseFloat((obj.priWaiterRealDeliveryFee)).toFixed(2))
                            return (res===0||res)?res:""
                        } else{
                            return ""
                        }
                    }
                },
            })
        },
        sub(index){
            this.dataForm.list.splice(index,1)
        },
        checkData() {
            const existStrFn = this.$Utils.existStr
            let {dataForm:{list}} = this
            let flag = true
            this.dataForm.list = list = list.filter(item=>{
                return !(!existStrFn(item.priceMin)
                        &&!existStrFn(item.priceMax)
                        &&!existStrFn(item.pubWaiterRealDeliveryFee)
                        &&!existStrFn(item.pubPlatformRealDeliveryFee)
                        &&!existStrFn(item.customerDeliveryFee)
                        &&!existStrFn(item.pubPlatformDeliveryFee))
            })
            flag = list.every(item=>{
                if(!existStrFn(item.priceMin)){
                    this.$message("请填写价格区间最小值")
                    return
                }
                if(!existStrFn(item.priceMax)){
                    this.$message("请填写最大值")
                    return
                }
                if(!existStrFn(item.pubWaiterRealDeliveryFee)){
                    this.$message("请填写服务员实际所得-公共")
                    return
                }
                if(!existStrFn(item.pubPlatformRealDeliveryFee)){
                    this.$message("请填写平台实际补贴-公共")
                    return
                }

                if(!existStrFn(item.customerDeliveryFee)){
                    this.$message("请填写用户应出")
                    return
                }
                if(!existStrFn(item.pubPlatformDeliveryFee)){
                    this.$message("请填写平台补贴-公共")
                    return
                }
                return true
            })

            return flag
        },
        sureClick() {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    if(!this.checkData()) return
                    this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
                        .then(() => {
                            if (!this.checkData()) return
                            if (this.dataForm.modelId) {
                                this.editData();
                            } else {
                                this.addData();
                            }
                        });
                }
            })
        },
        addData() {
            let param = {
                modelName: this.dataForm.modelName,
                businessId:this.dataForm.businessId,
                list: this.dataForm.list,
            };

            DeliveryModelApi.addDeliveryModel(param).then(res => {
                this.$Utils.notifySuccess()
                this.returnList();
            })
        },
        editData() {
            let param = {
                modelId: this.dataForm.modelId,
                modelName: this.dataForm.modelName,
                businessId:this.dataForm.businessId,
                list: this.dataForm.list,
            };
            DeliveryModelApi.editDeliveryModel(param)
                .then(() => {
                    this.$Utils.notifySuccess()
                    this.returnList();
                })
        },
        returnList() {
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path: '/business/deliveryModelManagement' });
        }
    },

}
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.price-decimal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-input{
        width: 45%;
    }
    .sperate{
        width:12px;
        height: 1px;
        background-color: rgb(112, 110, 110);
        // margin: 0 2px;
    }
}
</style>

